<template>
  <div>
    <van-sticky>
      <!-- 头部子组件 -->
      <headerT @showdb="showdb" :cd="cd"></headerT>
      <!-- 表单框子组件 -->
      <inputT @par="par" :cd="cd"></inputT>
    </van-sticky>

    <div id="listTdiv">
      <!-- 数据子组件 -->
      <listT :cd="cd" @shan="shan"></listT>
    </div>

    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '60%' }"
      :overlay="true"
      :round="true"
    >
      <p><button @click="cd = 'red'">改变主题</button></p>
      <p><button @click="cd = '#fcf6a8'">改变主题</button></p>
      <p><button @click="cd = '#aa9fe9'">改变主题</button></p>
    </van-popup>
  </div>
</template>

<script>
import headerT from "../components/todolist/headerT";
import inputT from "../components/todolist/inputT";
import listT from "../components/todolist/listT";
export default {
  data() {
    return {
      show: false,
      cd: "pink",
    };
  },
  mounted() {
    this.$store.dispatch("getlist");
  },
  methods: {
    // 父组件方法  添加
    par(data) {
      this.$store.commit("app", data);
      
    },
    showdb() {
      this.show = !this.show;
    },
    // 删除
    shan(id) {
      this.$store.commit("remove", id);
   
    },
  },
  components: {
    headerT,
    inputT, 
    listT, 
  },
};
</script>

<style lang="scss" scoped>
#listTdiv {
  margin-bottom: 60px;
}
button {
  width: 100px;
  height: 40px;
  margin-top: 20px;
}
</style>
